<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="./framework/font-awesome-4.7.0/css/font-awesome.min.css">
		<link rel="stylesheet" href="./framework/reset.css">
		<link rel="stylesheet" href="./framework/common.css">
		<link rel="stylesheet" href="./css/selectAqi.css">
		<title>东软环保公众监督系统-公众监督员端-空气质量描述和预估AQI</title>
		<script src="../js/axios.js"></script>
	</head>

	<body>
		<!-- 总容器 -->
		<div class="wrapper">
			<div class="header-box">
				<header>
					<i class="fa fa-angle-left" onclick="history.go(-1)"></i>
					<p>选择AQI</p>
					<i class="fa fa-th" onclick="location.href='selectGrid.html'"></i>
				</header>
				<div class="top-ban"></div>
			</div>

			<table border="1" id="titles">
			</table>
			<div class="aqi-box">
				<h4>请预估当前空气质量指数等级：</h4>
				<ul id="aqis">
					<li>
						<div style="background-color: #02E300;">一</div>
						<input type="radio" checked>
					</li>
					<li>
						<div style="background-color: #FFFF00;">二</div>
						<input type="radio">
					</li>
					<li>
						<div style="background-color: #FF7E00;">三</div>
						<input type="radio">
					</li>
					<li>
						<div style="background-color: #FE0000;">四</div>
						<input type="radio">
					</li>
					<li>
						<div style="background-color: #98004B;">五</div>
						<input type="radio">
					</li>
					<li>
						<div style="background-color: #7E0123;">六</div>
						<input type="radio">
					</li>
				</ul>
				<h4>请填写反馈信息：</h4>
				<textarea placeholder="请填写反馈信息" id="feedBackText"></textarea>
				<div class="btn" onclick="addFeedBack();">提交</div>
			</div>
		</div>
	</body>
</html>
<script>
	function loadData() {
		let url = "http://localhost:8080/aqi/showAll";
		axios.get(url).then((r) => {
			if (r.data.ok) {
				let aqis = r.data.data.aqis;
				let innerHTML = "";
				for (var i = 0; i < aqis.length; i++) {
					let aqi = aqis[i]
					innerHTML = innerHTML + " <tr>\n" +
						" \t<td>" + aqi.chineseExplain + "</td>\n" +
						" \t<td>" + aqi.aqiExplain + "</td>\n" +
						" \t<td>" + aqi.healthImpact + "</td>\n" +
						" </tr>"
				}
				document.getElementById("titles").innerHTML = innerHTML;
				innerHTML = "";
				for (var i = 0; i < aqis.length; i++) {
					let aqi = aqis[i]
					innerHTML = innerHTML + " <li>\n" +
						" \t<div style=\"background-color: " + aqi.color + ";\">" + aqi.chineseExplain +
						"</div>\n" +
						" \t<input type=\"radio\" name=\"aqicheck\">\n" +
						" </li>"
				}
				document.getElementById("aqis").innerHTML = innerHTML;
			}
		})
	}
	loadData();

	function addFeedBack() {
		let provinceId = localStorage.getItem("provinceId");
		let cityId = localStorage.getItem("cityId");
		let address = localStorage.getItem("address");
		let aqiArr = document.getElementsByName("aqicheck");
		let feedBackText = document.getElementById("feedBackText").value;
		let token = localStorage.getItem("token");
		// 创建请求配置对象
		const config = {
			headers: {
				'token': token, // 设置认证令牌
				'Content-Type': 'application/json' // 设置内容类型为JSON
			}
		};
		let aqiLevel = 1;
		for (var i = 0; i < aqiArr.length; i++) {
			if (aqiArr[i].checked) {
				aqiLevel = i + 1;
			}
		}
		let url = "http://localhost:8080/aqi/insert";
		axios.post(url, {
			provinceId: provinceId,
			cityId: cityId,
			address: address,
			estimatedGrade: aqiLevel,
			information: feedBackText
		}, config).then((r) => {
			if (r.data.ok) {
				alert("提交成功")
				location.href = "feedbackList.html";
			} else {
				alert("提交失败")
			}
		})
	}
</script>